<template>
	<view class="login-con">
		<view class="login-top">
			<view class="title">hihui</view>
			<view class="sub-title">登录智慧物业</view>
		</view>
		<view class="login-form">
			<u--form labelPosition="left" :model="loginForm" :rules="rules" ref="uForm" labelWidth="0">
				<u-form-item prop="phone" borderBottom>
					<u--input v-model="loginForm.phone" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item prop="code" borderBottom>
					<u--input v-model="loginForm.code" placeholder="请输入验证码" border="none"></u--input>
					<GetCode slot="right" :codePhone = "loginForm.phone"/>
				</u-form-item>
				<u-form-item>
					<u-button type="primary" text="微信用户一键登录"></u-button>
				</u-form-item>
				<u-form-item>
					<u-button :plain="true" text="手机号码登录" @click="onLogin"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import { login } from '@/common/userApi.js';
	import { isvalidPhone } from '@/common/utils/validate'
	import GetCode from '@/components/getCode/index.vue'
	export default {
		name: 'Login',
		components: {
			GetCode
		},
		data() {
			return {
				loginForm: {},
				rules: {
					'phone': [{
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return isvalidPhone(value)
							},
							message: '请输入正确的手机号',
						}
					],
					'code': {
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			onLogin() {
				let that = this
				that.$refs.uForm.validate().then(res => {
					login(that.loginForm).then(res => {
						this.$u.vuex('vuex_token', res.token); //保存到store
						this.$u.vuex('vuex_user',res.user)
						uni.$u.route('pages/user/user');
					})
				}).catch(errors => {
					console.log("校验失败", errors)
					//uni.$u.toast('校验失败')
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-con {
		.login-top {
			text-align: center;
			padding: 80rpx 0;

			.title {
				color: $u-primary;
				font-size: 100rpx;
				font-family: '';
			}

			.sub-title {
				color: $uni-text-color;
				font-size: 40rpx;
			}
		}

		.login-form {
			padding: 20rpx;
		}
	}
</style>
